//
let that=this
//class创建类
class Tab{
  constructor(id) {
    this.box = document.querySelector(id)
    //获取ul
    this.ul = this.box.querySelector('.firstNav ul')
    //获取tab内容
    this.div=this.box.querySelector('.tabscon')
    //获取加号
    this.addT = this.box.querySelector('.tabadd')
    //绑定添加事件
    this.addT.addEventListener('click',this.addTab.bind(this))
    this.init()
  }
  //初始化绑定
  init() {
    //获取li
    this.lis=this.box.querySelectorAll('.firstNav li')
    //获取section
    this.sections=this.box.querySelectorAll('.tabscon section')
  //获取删除按钮
    this.spans=this.box.querySelectorAll('.firstNav li .iconfont')
    //删除循环绑定点击事件
    this.spans.forEach((item,index) => {
      item.onclick=this.delTab.bind(this,item,index)
    });
    //循环绑定点击事件
    this.lis.forEach((item,index) => {
      item.onclick=this.recetTab.bind(this,item,index);
    })
  }

  //1.切换模块
  recetTab(item,index) {
   this.lis.forEach(item=>item.className='')
   this.sections.forEach(item=>item.className='')
    item.className = 'liactive'
    this.sections[index].className='conactive'
  }
  //2.新增模块
  addTab() {
    const li = document.createElement('li')
    const section=document.createElement('section')
    li.innerHTML=`<span>测试</span><span class="iconfont icon-guanbi"></span>`
    section.innerHTML=`测试2.1864165`
    this.ul.appendChild(li)
    this.div.appendChild(section)
    this.init()
    li.click()
  }
  //3.删除模块
  delTab(item, index, e) {
    //存在一个bug，因为addEventListener可以重复绑定事件，所以每调用一次函数就会绑定一次点击事件
    console.log(index);
    e.stopPropagation()
    item.parentNode.remove()
    this.sections[index].remove()
    if(this.box.querySelector('.liactive')) return
    if (index ===this.spans.length - 1) {
      this.lis[index-1]?.click()
    } else{
      this.lis[index+1].click()
    }
    this.init()
  }
  //4.ondblclick双击事件
  
}
 
new Tab('#tab')